<template>
  <!--  采购计划详情-->
  <div class="applicationXQ">
    <el-dialog
      title="采购清单"
      :visible.sync="centerDialogVisible"
      width="80%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
    >
      <div style="max-width:100%;margin:auto;padding-bottom:50px;">
        <!-- <h4>采购清单</h4> -->
        <el-table :data="detailForm" border @expand-change="expandChange" default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="expandList">
                <el-table-column align="center" type="index" label="序号" width="55" />
                <el-table-column align="center" label="设备名称" property="deviceName" width="150" />
                <el-table-column align="center" label="设备型号" property="deviceModel" />
                <el-table-column align="center" label="设备类别" property="typeName" />
                <el-table-column align="center" label="入库时间" property="storageDate" width="170" />
                <el-table-column align="center" label="入库数量" property="storageNumber" />
                <el-table-column align="center" label="设备单位" property="deviceUnit" />
                <el-table-column align="center" label="需要程度" property="degreeNeed" />
                <el-table-column align="center" label="用途" property="purpose" />
                <el-table-column align="center" label="备注" property="remark" />

              </el-table>
            </template>
          </el-table-column> -->
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column label="名称" property="deviceName" align="center" />
          <el-table-column label="规格型号" property="deviceModel" align="center" />
          <el-table-column label="预计数量" property="anticipatedProcureNum" align="center" />
          <el-table-column label="验收数量" align="center">
            <template slot-scope="scope">
              {{Number(scope.row.anticipatedProcureNum)-Number(scope.row.remainingQuantity)}}
            </template>
          </el-table-column>
          <el-table-column label="剩余数量" property="remainingQuantity" align="center" />
          <el-table-column label="单位" property="deviceUnitName" align="center" />

          <el-table-column label="需要程度" property="degreeNeed" align="center" />
          <el-table-column label="用途" property="purpose" align="center" />
          <el-table-column label="使用单位" property="recipientsDeptName" width="150px" align="center" />
          <el-table-column label="设备分类" property="deviceTypeName" width="100px" align="center" />
          <el-table-column label="备注" property="remark" align="center" />
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
              v-show="scope.row.remainingQuantity>0"
                icon="el-icon-edit"
                size="mini"
                type="success"
                @click="info=scope.row;isshou=true"
              >验收</el-button>
              <el-button
                icon="el-icon-view"
                size="mini"
                type="info"
                @click="aid=scope.row.id;isList=true"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <cg-list-dia v-if="isList" @subSetChane="subSetChane" :pid="aid"></cg-list-dia>
    <yan-shou v-if="isshou" @subSetChane="addSetChane" :info="info"></yan-shou>
  </div>
</template>

<script>
import { procurePlanDetail } from "@/api/purchase/index";
import { fileDownload } from "@/api/basicInformation/index";
import request from "@/utils/request";
import cgListDia from "./caigouListDia";
import yanShou from "./yanshou";

export default {
  name: "applicationXQ",
  props: ["pid"],
  components: {
    cgListDia,
    yanShou,
  },
  data() {
    return {
      centerDialogVisible: true,
      detailForm: [],

      isList: false,
      isshou: false,
      info: null,
      aid: null,
      expandList:[]
    };
  },
  created() {
    this.getDetail(this.pid);
  },
  methods: {
    async expandChange(row) {
      request({
        url: `/device/storageRecord/${row.id}`,
        method: "get",
      }).then((res) => {
        row.children = res.rows
      });
    },
    async getDetail(id) {
      request({
        url: `/device/procureDevice/${id}`,
        method: "get",
      }).then((res) => {
        this.detailForm = res.data;
      });
    },

    close() {
      this.$emit("subSetChane");
    },
    subSetChane() {
      this.isList = false;
    },
    addSetChane(info) {
      this.isshou = false;
      this.info = null;
      if (info) this.getDetail(this.pid);
    },
  },
};
</script>
<style lang="scss" scoped>
.applicationXQ {
  margin-left: 20px;
  .dialog >>> .el-dialog__body {
    height: 85vh;
    overflow: scroll;
    // margin: 0 30px;
  }
  h4 {
    color: #05a380;
  }
  .blue {
    color: #2196f3;
  }
  .sum {
    margin-top: 20px;
    color: #666666;
    text-align: right;
    // width: 1000px;

    .h4 {
      font-weight: bold;
    }

    .int {
      padding: 0 5px;
    }
  }

  .unloadBox {
    border: 1px solid #cccccc;
    margin-top: 20px;
    min-height: 50px;
    overflow: hidden;
    // width: 1000px;

    .file {
      width: 100%;
      border-top: 1px #cccccc dotted;
      line-height: 50px;

      .index {
        padding: 0 10px;
        color: #666;
      }

      i {
        float: right;
        line-height: 50px;
        padding-right: 10px;
        font-size: 20px;
        cursor: pointer;
      }

      .type {
        color: #666;
        float: right;
        padding-right: 30px;
      }
    }
  }

  .table {
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;

    tr {
      td:nth-child(2n-1) {
        width: 180px;
        text-align: center;
      }

      td:nth-child(2n) {
        width: 320px;
        padding-left: 10px;
      }

      td {
        line-height: 35px;
      }
    }
  }

  .el-table {
    margin-top: 20px;
    // width: 1000px;
  }
}
</style>
